<template>
  <div class="invite-item invite-item1" :style="line ? '' : 'border:none'" :class="line ? 'pb' : ''" @click.stop>
    <div class="invite-top" @click.stop="details(item)">
      <div class="invite-item-left line1" :style="'padding-top:' + pt + 'px'">
        <div class="invite-view-time" v-if="item.createDate && from == 'view'">
          {{ item.createDate.split(" ")[0] }}
        </div>
        <div class="invite-title line1 pointer">
          <tag-view :item="item"></tag-view>
          <!-- 【周末双休】大数据开发工程师 -->
          {{ item.title }}
        </div>
        <div class="tag-list line1" v-if="item.fringeBenefits">
          <template>
            <div class="tag-item " v-for="item2 in item.fringeBenefits.split(',')" :key="item2">
              {{ item2 }}
            </div>
          </template>
        </div>
        <div class="invite-user">
          <div class="invite-user-location" style="width:124px;overflow: hidden;text-overflow: ellipsis;" v-if="item.region">
            <i class="el-icon-location-information"></i>
            <!-- 凤台 -->
            {{ item.workLocation || item.region }}
          </div>
          <img @click.stop="agentDetailNew(item)" :src="item.userImage ||
            (item.userInformation && item.userInformation.image) ||
            (item.userInformationDto && item.userInformationDto.image) ||
            defaultAvatar
            " alt="" class="invite-user-img" />
          <div class="invite-user-name" @click.stop="agentDetailNew(item)">
            <!-- 张毅 -->
            {{
              item.nikeName ||
              (item.userInformation && item.userInformation.nikeName) ||
              (item.userInformationDto && item.userInformationDto.nikeName) ||
              "未命名用户"
            }}
          </div>
          <div class="invite-user-company" v-if="item.enterpriseName"
            @click.stop="companyDetails(item)">
            {{ item.enterpriseName }}
          </div>
        </div>
        <!-- <div class="invite-user-company" v-if="item.enterpriseName" @click.stop="companyDetails(item)">
          {{ item.enterpriseName }}
        </div> -->
      </div>
      <div class="invite-item-right">
        <div class="invite-salary" :style="!item.fringeBenefits ? 'margin-top:4px;' : ''"
          v-if="item.recruitmentType == 1">
          <!-- 100元/天 -->
          <div></div>
          {{ item.salaryRange == "面议" ? "面议" : item.salaryRange + "元" }}
        </div>
        <div class="invite-salary" :style="!item.fringeBenefits ? 'margin-top:4px;' : ''" v-else>
          <!-- 100元/天 -->
          <div style="font-weight:400;font-size:30px;">
            {{ (item.salaryRange || '').split(",").join("") }}
          </div>
          <div class="invite-type">
            <!-- 日结 -->
            {{ item.settlementMethod }}
          </div>
        </div>
        <div class="invite-user-mark">
          <div class="marks">
            <!-- 软件工程师 -->
            {{ item.positionCategory }}
            <div class="marks-seperate"></div>
          </div>
          <div class="marks" v-if="item.educationalRequirements">
            <!-- 本科 -->
            {{
              (item.educationalRequirements != "不限" &&
                item.educationalRequirements.split("/").join("/")) ||
              "学历不限"
            }}
            <div class="marks-seperate"></div>
          </div>
          <div class="marks" v-if="item.yearsService">
            {{
              (item.yearsService != "不限" && item.yearsService) || "经验不限"
            }}
            <!-- 3-5年 -->
            <div class="marks-seperate"></div>
          </div>
          <!-- 兼职显示 -->
          <div class="marks" v-if="item.workingHours">
            {{
              (item.workingHours != "不限" &&
                item.workingHours.split(",").join("-")) ||
              "工作时长不限"
            }}

            <!-- 3-5年 -->
            <div class="marks-seperate"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="invite-bottom" v-if="pb || mode == 'own'">
      <div class="invite-user-post-time-wrap" v-if="mode == 'own'">
        <div style="display: flex; align-items: center">
          <div class="invite-user-post-time">
            投递时间：{{ item.createDate.split(" ")[0] }}
          </div>
          <div class="auditType" v-if="item.auditStatus == 0">审核中</div>
          <div class="rejected" v-else-if="item.auditStatus == 2">已拒绝</div>
        </div>

        <div class="invite-user-post-btn" @click="resumeHistory(item, 1)">
          简历记录
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String
    },
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    source: {
      type: Object,
      default() {
        return {};
      }
    },
    // user 或者 index
    mode: {
      type: String,
      default: "index"
    },
    // 是否带底线
    line: {
      type: Boolean,
      default: false
    },
    // 上边距
    pt: {
      type: String | Number,
      default: 17
    },
    // 下内边距
    pb: {
      type: String | Number,
      default: false
    },
    //
    from: {
      type: String,
      default: "show" // show展示 view浏览
    },
    // 自定义事件
    customEvent: {
      type: Boolean,
      default: false // show展示 view浏览
    }
  },
  watch: {
    source(newV, oldV) {
      console.log("sourcesource");
      if (newV) {
        this.obj = newV;
      }
    },
    item(newV, oldV) {
      if (newV) {
        this.obj = newV;
      }
    }
  },

  data() {
    return {
      obj: {},
      list: [
        {
          id: 0,
          value: "双休"
        },
        {
          id: 1,
          value: "房补"
        }
      ],
      marks: ["软件工程师", "本科", "3-5年"]
    };
  },
  methods: {
    // 建立记录
    resumeHistory(item, index) {
      this.$emit("resumeHistory", item, index);
    },
    details(item = this.item) {
      if (this.customEvent) {
        this.$emit("details", item);
      } else {
        this.goInviteDetail(
          {
            id: item.id
          },
          item
        );
      }
    },
    goCompany() {
      const routeLink = this.$router.resolve({
        path: "/invite/company"
      });
      window.open(routeLink.href, "_self");
      // this.$router
    }
  }
};
</script>

<style lang="less" scoped>
.pb {
  padding-bottom: 16px;
}

.auditType {
  background-color: #f1a154;
  border-radius: 8rpx;
  color: #ffffff;
}

.rejected {
  background-color: #e86565;
  border-radius: 8rpx;
  color: #ffffff;
}

.invite-item {
  cursor: pointer;
  width: 100%;
  max-width: 1200px;
  opacity: 1;
  border-bottom: 1px solid #f2f2f2;

  .invite-view-time {
    display: inline;
    padding: 6px 0;
    width: 100px;
    text-align: center;
    white-space: nowrap;
    background-color: #c4c4c4;
    border-radius: 2px;
    color: #fff;
  }

  .invite-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    overflow: hidden;

  }

  .invite-bottom {
    padding-bottom: 16px;
  }

  .invite-item-left {
    flex-shrink: 1;
    padding-right: 16px;

    // width: 72%;

    padding-top: 16px;

    display: flex;
    flex-direction: column;
    justify-items: center;

    .invite-title {
      height: 34px;
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      line-height: 34px;
      padding-bottom: 12px;
    }

    .tag-list {
      overflow: hidden;
      padding-bottom: 20px;
      display: block;

      .tag-item {
        display: inline-block;
        vertical-align: middle;
        padding: 0 7px;
        height: 24px;
        line-height: 24px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid #999999;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-right: 10px;
      }
    }

    .invite-user {
      display: flex;
      align-items: center;

      .invite-user-img {
        width: 30px;
        height: 30px;
        background: #d9d9d9;
        opacity: 1;
        border-radius: 50%;
        margin-right: 4px;
      }

      .invite-user-name {
        cursor: pointer;
        padding-right: 24px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }

      .invite-user-location {
        font-size: 16px;
        font-weight: 400;
        color: #333333;

        .el-icon-location-information {
          font-size: 16px;
          color: #64b6a8;
        }
      }
    }

    .invite-user-company {
      cursor: pointer;
      font-size: 16px;
      font-weight: 400;
      color: #64b6a8;
      padding: 0px 5px;
      height: 30px;
      border: 1px solid #64b6a8;
      border-radius: 4px;
      line-height: 30px;
    }
  }

  .invite-item-right {
    flex-shrink: 0;

    .invite-salary {
      height: 45px;
      font-size: 30px;
      font-weight: 400;
      color: #e00000;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .invite-type {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 400;
        color: #333333;
      }
    }

    .invite-user-mark {
      margin-top: 4px;
      display: flex;
      align-items: center;
      justify-content: center;

      .marks {
        white-space: nowrap;
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;

        &:last-child {
          .marks-seperate {
            display: none;
          }
        }

        .marks-seperate {
          width: 2px;
          height: 25px;
          opacity: 1;
          background-color: #999999;
          margin: 0 10px;
        }
      }
    }
  }

  .invite-user-post-time-wrap {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-items: center;

    .invite-user-post-time {
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;
    }

    .invite-user-post-btn {
      text-align: center;
      width: 112px;
      height: 40px;
      border-radius: 4px;
      opacity: 1;
      border: 1px solid #64b6a8;

      text-align: center;
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #64b6a8;
      line-height: 28px;
      cursor: pointer;
    }
  }
}
</style>
